<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轨道监控</title>

    <script type="text/javascript" src="/js/staticResources/js/dark.js"></script>
    <script type="text/javascript" src="/js/staticResources/js/mqttws31.min.js"></script>

    <script type="text/javascript" src="/js/staticResources/js/vxgplayer-1.8.40.min.js"></script>
    <link rel="stylesheet" href="/js/staticResources/js/vxgplayer-1.8.40.min.css">

    <link rel="shortcut icon" href="#"/>

    <style>
        body {
            font-family: Arial, Sans-Serif;
            font-size: 0.6em;
            color: black;
        }
        #first{
            left:0px;
            top:0px;
            width: 1100px;
            height:300px;
            background:white ;
            position: absolute;
            border:3px solid #b6c185;
        }
        #second{
            left:0px;
            top:300px;
            width: 1100px;
            height:300px;
            background:white ;
            position: absolute;
            border:3px solid #b6c185;
        }
        .title1{
            left:10px;
            top:0px;
            width: 400px;
            background:white ;
            position: absolute;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        .view{
            left:10px;
            top:50px;
            width: 400px;
            height:240px;
            background:black ;
            position: absolute;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            border:3px solid red;
        }
        .resImg{
            left:420px;
            top:50px;
            width: 400px;
            height:240px;
            background:black ;
            position: absolute;
            border:3px solid red;
        }
        .title2{
            left:420px;
            top:0px;
            width: 400px;
            background:white ;
            position: absolute;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        .title3{
            left:840px;
            top:0px;
            width: 240px;
            position: absolute;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        .resText{
            left:840px;
            top:50px;
            width: 240px;
            height:240px;
            background:white ;
            position: absolute;
            border:2px solid black;
        }
        table{
             top: 3px;
             position: absolute;
        }
        input{
            width: 230px;
            height: 22px;
            font-size: 12px;
            border: white;

        }
    </style>

</head>
<body>
<div id="first">
    <div class="title1">
        <h1>前监控画面</h1>
    </div>
    <div class="view">
                <div id="vxg_media_player1" class="vxgplayer" width="390" height="220"
                     url="rtsp://admin:workwork123@192.168.11.122" autostart
                     avsync nmf-src="/pnacl/Release/media_player.nmf" nmf-path="media_player.nmf">
                </div>

    </div>

    <div class="title2">
        <h1>轨道异物显示</h1>
    </div>
    <div class="resImg">
        <table cellspacing="0" >
            <tr>
                <td>
                    <img id="img10" src="" width="128" >
                </td>
                <td>
                    <img id="img11" src="" width="128" >
                </td>
                <td>
                    <img id="img12" src="" width="128" >
                </td>
            </tr>
        </table>
    </div>

    <div class="title3">
        <h1>异常信息</h1>
    </div>
    <div class="resText">
        <tr><input type="text" value=" " id="result10" name="result" readonly/></tr>
        <tr><input type="text" value=" " id="result11" name="result" readonly/></tr>
        <tr><input type="text" value=" " id="result12" name="result" readonly/></tr>
        <tr><input type="text" value=" " id="result13" name="result" readonly/></tr>
        <tr><input type="text" value=" " id="result14" name="result" readonly/></tr>
        <tr><input type="text" value=" " id="result15" name="result" readonly/></tr>
        <tr><input type="text" value=" " id="result16" name="result" readonly/></tr>
        <tr><input type="text" value=" " id="result17" name="result" readonly/></tr>
        <tr><input type="text" value=" " id="result18" name="result" readonly/></tr>
        <tr><input type="text" value=" " id="result19" name="result" readonly/></tr>
    </div>

</div>

<div id="second">
    <div class="title1">
        <h1>后监控画面</h1>
    </div>
    <div class="view">

        <div class="content-absolute">
            <div class="content">
                <div id="vxg_media_player2" class="vxgplayer" width="390" height="220"
                     url="rtsp://admin:workwork123@192.168.11.123" autostart
                     avsync nmf-src="/pnacl/Release/media_player.nmf" nmf-path="media_player.nmf">
                </div>
            </div>
        </div>
    </div>

    <div class="title2">
        <h1>轨道异物显示</h1>
    </div>
    <div class="resImg">
        <table cellspacing="0">
            <tr>
                <td>
                    <img id="img20" src="" width="128" >
                </td>
                <td>
                    <img id="img21" src="" width="128" >
                </td>
                <td>
                    <img id="img22" src="" width="128" >
                </td>
            </tr>
        </table>
    </div>

    <div class="title3">
        <h1>异常信息</h1>
    </div>
    <div class="resText">
        <table>
            <tr><input type="text" value=" " id="result20" name="result" readonly/></tr>
            <tr><input type="text" value=" " id="result21" name="result" readonly/></tr>
            <tr><input type="text" value=" " id="result22" name="result" readonly/></tr>
            <tr><input type="text" value=" " id="result23" name="result" readonly/></tr>
            <tr><input type="text" value=" " id="result24" name="result" readonly/></tr>
            <tr><input type="text" value=" " id="result25" name="result" readonly/></tr>
            <tr><input type="text" value=" " id="result26" name="result" readonly/></tr>
            <tr><input type="text" value=" " id="result27" name="result" readonly/></tr>
            <tr><input type="text" value=" " id="result28" name="result" readonly/></tr>
            <tr><input type="text" value=" " id="result29" name="result" readonly/></tr>
        </table>
    </div>

</div>
</body>
<script type="text/javascript">
    //刷新实时显示
    self.setInterval("playVideo()",120000);
    function playVideo() {
        window.vxgplayer('vxg_media_player1').stop();
        window.vxgplayer('vxg_media_player1').src("rtsp://admin:workwork123@192.168.11.122");
        window.vxgplayer('vxg_media_player1').play();
        window.vxgplayer('vxg_media_player2').stop();
        window.vxgplayer('vxg_media_player2').src("rtsp://admin:workwork123@192.168.11.123");
        window.vxgplayer('vxg_media_player2').play();
    }
    //MQTT
    var imgNum = 0;
    var n = 0;
    var clientid='trackmonitor';
    client = new Paho.MQTT.Client("192.168.11.15",8083,clientid); //建立客户端实例
    client.connect({
        onSuccess: onConnect,
        userName: "admin",
        password: "public"
    }); //连接服务器并注册连接成功处理事件
    client.onConnectionLost = onConnectionLost; //注册连接断开处理事件
    client.onMessageArrived = onMessageArrived; //注册消息接收处理事件

    function onConnect() {
        console.log("已连接");
        client.subscribe("trackImage1");
        client.subscribe("trackImage2");
        client.subscribe("trackRes1");
        client.subscribe("trackRes2");

    }

    function onConnectionLost(responseObject) {
        if(responseObject.errorCode !== 0) {
            console.log("连接已断开");
        }
        client.connect({
            onSuccess: onConnect,
            userName: "admin",
            password: "public"
        });

    }

    function onMessageArrived(message) {
        topic = message.destinationName;
        if(topic=="trackImage1"){
            n = imgNum % 3;
            imgNum++;
            console.log(n);
            payload = message.payloadString;
            var src='/images/track_img/'+payload;
            document.getElementById("img1"+n).src=src;
        }
        if(topic=="trackRes1"){
            payload = message.payloadString;
            console.log(payload);
            for (var i = 9; i > 0; i--) {
                document.getElementById("result1"+i).value=document.getElementById("result1"+(i-1)).value;
            }
            document.getElementById("result10").value=payload;
        }
        if(topic=="trackImage2"){
            n = imgNum % 3;
            imgNum++;
            console.log(n);
            payload = message.payloadString;
            var src='/images/track_img/'+payload;
            document.getElementById("img2"+n).src=src;
        }
        if(topic=="trackRes2"){
            payload = message.payloadString;
            console.log(payload);
            for (var i = 9; i > 0; i--) {
                document.getElementById("result2"+i).value=document.getElementById("result2"+(i-1)).value;
            }
            document.getElementById("result20").value=payload;
        }
    }
    //var text=alert("物流轨道存在异物！请尽快处理");
    //document.write(text);
</script>

</html>


